vue 引入本地图片不显示

#vue 引入本地图片不显示| 来源: 网络整理| 查看: 265

一般情况我们引入图片方式：在这里插入图片描述 **

这样传过去的图片地址，在页面无法显示：

** 大致总结了一下原因：是由于webpack打包引起的，没打包之前，图片是在src文件夹的assets文件放置的图片，webpack不会把url路径当成依赖项进行打包，打包后，dist文件夹下并没有assets文件，所以图片加载不出来

解决方案：先将图片从本地导入到组件中，这样webpack打包时就会把图片当做依赖进行打包，打包后会多一个图片文件夹，从而加载图片

import Top from '@/common/header' import Foot from '@/common/footer' import Vavtar from "@/components/Vavtar/index.vue"; import img from "@/assets/logo.png" export default { name:'app', components:{ Top, Foot, Vavtar }, data(){ return{ img, } } }

打包后dist/public目录多了一个img文件在这里插入图片描述解决方案二：

import Top from '@/common/header' import Foot from '@/common/footer' import Vavtar from "@/components/Vavtar/index.vue"; //import img from "@/assets/logo.png" export default { name:'app', components:{ Top, Foot, Vavtar }, data(){ return{ img:require('@/assets/logo.png') // 动态引入图片 } } }

归根结底，webpack打包时会把import、require（）、src等作为依赖项打包

【本文地址】

公司简介

联系我们